<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存查询 - 企业资产管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link  rel="stylesheet" type="text/css" href="/static/css/zc.css">
    <style>
        #page{
            width: 100%;
            margin: 0 auto;
        }
        #page button{
            border: 0;
            width:150px;
            height: 70px;
            background-color: blue;
            font-size: 16px;
            color: white;
            margin: 0 50px;
        }
        .look button{
            display: block;
            width: 100%;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>
<body>

<!-- 头部导航 -->
<header class="header">
    <div class="logo">
        <i class="bi bi-building"></i>
        <span>企业资产管理系统</span>
    </div>
    <div class="header-right">
        <div class="notification-icon">
            <i class="bi bi-bell"></i>
            <span class="notification-badge">3</span>
        </div>
        <div class="dropdown">
            <a href="#" class="dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://cn.bing.com/images/search?view=detailV2&ccid=OSFH3hIu&id=6E8860BEADD760736BEA422E3C9BF57317AA4F3E&thid=OIP.OSFH3hIukHqh-qrOvIfUWgAAAA&mediaurl=https%3a%2f%2fc-ssl.dtstatic.com%2fuploads%2fblog%2f202303%2f20%2f20230320145706_07ca5.thumb.400_0.jpeg&exph=498&expw=400&q=%e5%a4%b4%e5%83%8f&simid=607997774809754286&FORM=IRPRST&ck=19ACE4792BC2347CFE89D1BC55CC90F4&selectedIndex=0&itb=0" class="rounded-circle user-avatar" alt="用户头像">
                <span>管理员</span>
                <i class="bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>个人信息</a></li>
                <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>系统设置</a></li>
                <li><hr class="dropdown-divider"></li>
                <form action="logout">
                    <a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a>
                </form>
            </ul>
        </div>
    </div>
</header>

<!-- 主体内容 -->
<div class="main-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
        <ul class="sidebar-menu">
            <li class="sidebar-item">
                <a href="home.jsp" class="sidebar-link">
                    <i class="bi bi-speedometer2"></i>
                    <span>控制面板</span>
                </a>
            </li>
            <li class="sidebar-item">
                <a href="Inventory_Query.jsp" class="sidebar-link dropdown-toggle active" data-bs-target="#assetMenu">
                    <i class="bi bi-laptop"></i>
                    <span>资产管理</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="assetMenu">
                    <li class="sidebar-item">
                        <a href="Inventory_Query.jsp" class="sidebar-link active">
                            <span>库存查询</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="Asset_Inbound.jsp" class="sidebar-link">
                            <span>资产入库</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="Asset_Scrap.jsp" class="sidebar-link">
                            <span>资产报废</span>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="sidebar-item">
                <a href="Maintenance_Apply.jsp" class="sidebar-link dropdown-toggle" data-bs-target="#maintenanceMenu">
                    <i class="bi bi-tools"></i>
                    <span>维修管理</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="maintenanceMenu">
                    <li class="sidebar-item">
                        <a href="Maintenance_Apply.jsp" class="sidebar-link">
                            <span>维修申请</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="maintenance_record.jsp" class="sidebar-link">
                            <span>维修记录</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="maintenance_statistics.jsp" class="sidebar-link">
                            <span>维修统计</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="sidebar-item">
                <a href="user_management.jsp" class="sidebar-link dropdown-toggle" data-bs-target="#systemMenu">
                    <i class="bi bi-gear"></i>
                    <span>系统设置</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="systemMenu">
                    <li class="sidebar-item">
                        <a href="user_management.jsp" class="sidebar-link">
                            <span>用户管理</span>
                        </a>
                    </li>

                    <li class="sidebar-item">
                        <a href="Department_Management.jsp" class="sidebar-link">
                            <span>部门管理</span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </aside>

    <!-- 内容区域 -->
    <main class="content">
        <h2 class="page-title">库存查询</h2>
        
        <!-- 搜索卡片 -->
        <div class="card">
            <div class="card-header">
                <span>搜索条件</span>
            </div>
            <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label">资产分类</label>
                            <select class="form-select" id ="type">
                                <option value="0">全部</option>
<%--                            资产分类--%>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">部门</label>
                            <select class="form-select" id="dept">
                                <option value="0">全部</option>
<%--                            部门--%>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">库存状态</label>
                            <select class="form-select" id="state">
                                <option value="">全部</option>
<%--                      状态                                             --%>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <label class="form-label">资产名称/编号</label>
                            <input type="text" class="form-control" placeholder="请输入资产名称"  id="zc_name_input">
                        </div>
<%--                        <div class="col-md-4">--%>
<%--                            <label class="form-label">入库日期范围</label>--%>
<%--                            <div class="input-group">--%>
<%--                                <input type="date" class="form-control">--%>
<%--                                <span class="input-group-text">至</span>--%>
<%--                                <input type="date" class="form-control">--%>
<%--                            </div>--%>
<%--                        </div>--%>
                    </div>
                    <div class="text-end">
                        <button type="reset" class="btn btn-outline-secondary me-2">重置</button>
                        <button class="btn btn-primary"  id="query">查询</button>
                    </div>
            </div>
        </div>
        
        <!-- 库存列表卡片 -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>库存列表</span>
                <div>
                    <button class="btn btn-sm btn-outline-primary me-2">
                        <i class="bi bi-download"></i> 导出
                    </button>
<%--                    <button class="btn btn-sm btn-outline-secondary">--%>
<%--                        <i class="bi bi-printer"></i> 打印--%>
<%--                    </button>--%>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>资产编号</th>
                                <th>资产名称</th>
                                <th>资产分类</th>
                                <th>所属部门</th>
                                <th>所在地点</th>
                                <th>购入价格</th>
                                <th>状态</th>
                                <th>入库日期</th>
                                <th>供应商</th>
                                <th>保修期限</th>


                            </tr>
                        </thead>
                        <tbody id = "neirong">
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <nav aria-label="库存列表分页"  id="page">
                    <div class="pagination">
                        <button  id="index">首页</button>
                        <button id="s" >上一页</button>
                        <button >第 <span id="current"> </span>   页  /共<span id="sum"> </span>  页</button>
                        <button  id="x">下一页</button>
                        <button  id="Last_page">尾页</button>
                        <button >共<span id="pagesize"></span>条</button>
                        <input value=""  id="page1" style="display: none" >
                        <input value=""  id="page2" style="display: none" >
                        <input value=""  id="page3" style="display: none" >

                    </div>
                </nav>
            </div>
        </div>
    </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化所有下拉菜单
        const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
        dropdownElementList.map(function (dropdownToggleEl) {
            return new bootstrap.Dropdown(dropdownToggleEl);
        });

        // 获取所有带有dropdown-toggle类的链接
        const dropdownToggles = document.querySelectorAll('.sidebar-link.dropdown-toggle');

        // 为每个下拉菜单添加点击事件
        dropdownToggles.forEach(toggle => {
            toggle.addEventListener('click', function(e) {
                // 阻止默认行为
                e.preventDefault();

                // 获取目标菜单的ID
                const targetId = this.getAttribute('data-bs-target');
                const targetMenu = document.querySelector(targetId);

                // 获取当前菜单的箭头图标
                const arrowIcon = this.querySelector('.bi-chevron-down, .bi-chevron-up');

                // 如果点击的是箭头图标，切换目标菜单的显示状态
                if (e.target.classList.contains('bi-chevron-down') || e.target.classList.contains('bi-chevron-up')) {
                    if (targetMenu) {
                        const isShowing = targetMenu.classList.toggle('show');
                        // 根据显示状态更新箭头图标
                        if (arrowIcon) {
                            if (isShowing) {
                                arrowIcon.classList.remove('bi-chevron-down');
                                arrowIcon.classList.add('bi-chevron-up');
                            } else {
                                arrowIcon.classList.remove('bi-chevron-up');
                                arrowIcon.classList.add('bi-chevron-down');
                            }
                        }
                    }
                } else {
                    // 如果点击的是链接本身且href不为#，则进行页面跳转
                    const href = this.getAttribute('href');
                    if (href && href !== '#') {
                        window.location.href = href;
                    }
                }

                // 关闭其他打开的下拉菜单
                document.querySelectorAll('.sidebar-dropdown').forEach(menu => {
                    if (menu !== targetMenu && menu.classList.contains('show')) {
                        menu.classList.remove('show');
                        // 重置其他菜单的箭头图标
                        const otherToggle = document.querySelector(`[data-bs-target="#${menu.id}"]`);
                        if (otherToggle) {
                            const otherArrow = otherToggle.querySelector('.bi-chevron-up');
                            if (otherArrow) {
                                otherArrow.classList.remove('bi-chevron-up');
                                otherArrow.classList.add('bi-chevron-down');
                            }
                        }
                    }
                });

                // 清除所有菜单的活动状态
                document.querySelectorAll('.sidebar-link').forEach(link => {
                    link.classList.remove('active');
                });

                // 为当前菜单添加活动状态
                this.classList.add('active');
            });

        });

        // 页面加载时自动展开资产管理菜单并选中库存查询
        const assetMenu = document.getElementById('assetMenu');
        if (assetMenu) {
            assetMenu.classList.add('show');
        }

        // 更新资产管理菜单的箭头图标
        const assetToggle = document.querySelector('[data-bs-target="#assetMenu"]');
        if (assetToggle) {
            const arrowIcon = assetToggle.querySelector('.bi-chevron-down, .bi-chevron-up');
            if (arrowIcon) {
                arrowIcon.classList.remove('bi-chevron-down');
                arrowIcon.classList.add('bi-chevron-up');
            }
        }
    });
</script>
 <script src="/static/jq/jquery-1.4.4.min.js"></script>

<div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewModalLabel">资产详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody id="assetDetails">
                    <!-- 动态填充资产详情 -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
     // 下拉框回显
      $.ajax({
          url:"/getlist",
          dataType: "json",
          success:function (data){
              // <option value="0">全部</option>
              // 页面加载的时候加载资产类型下拉框
              for (let i = 0; i <data.type.length ; i++) {
                  $("#type").append(
                     " <option  value=" +data.type[i].id+">"+data.type[i].name+"</option>"
                  )
              }
         // 页面加载的时候显示部门下拉框
              for (let i = 0; i <data.dept.length ; i++) {
                  $("#dept").append(
                      " <option  value=" +data.dept[i].id+">"+data.dept[i].name+"</option>"
                  )
              }
          // 页面加载的时候显示库存状态下拉框
              for (let i = 0; i <data.state.length ; i++) {
                  $("#state").append(
                      " <option  value=" +data.state[i].id+">"+data.state[i].name+"</option>"
                  )
              }

          }
      })
    // 页面加载之前立即请求获取数据展示
        $.ajax({
            url:"/getlist",
            dataType:"json",
            success:function (data){
                console.log(data)
                for (let i = 0; i <data.list.length ; i++) {
                    $("#neirong").append(
                        "<tr>" +
                        "<td>"+data.list[i].id+"</td>" +
                        "<td>"+data.list[i].name+"</td>" +
                        "<td>"+data.list[i].type.name+"</td>" +
                        "<td>"+data.list[i].dept.name+"</td>" +
                        "<td>"+data.list[i].storage_location+"</td>" +
                        "<td>"+data.list[i].original_value+"</td>" +
                        "<td>"+data.list[i].state.name+"</td>" +
                        "<td>"+data.list[i].acquisition_date+"</td>" +
                        "<td>"+data.list[i].supplier+"</td>" +
                        "<td>"+data.list[i].term_of_service+"</td>" +
                        "<td class='btn btn-sm btn-outline-primary  look'      data-bs-toggle='modal'  data-bs-target='#viewModal' data-asset-id="+data.list[i].id+" data-asset-name="+data.list[i].name+"  data-asset-category="+data.list[i].type.name+"   data-department="+data.list[i].dept.name+"   data-current-stock="+data.list[i].description+"   data-status="+data.list[i].state.name+"  data-entry-date="+data.list[i].acquisition_date+" ><button style='border: none; background: none; outline: none; padding: 0;'>查看</button></td>" +
                        "</tr>"
                    )
                }
                // 获取所有“查看”按钮
                const viewButtons = document.querySelectorAll('.btn-outline-primary[data-bs-toggle="modal"]');

                viewButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 获取数据属性
                        const assetId = this.getAttribute('data-asset-id');
                        const assetName = this.getAttribute('data-asset-name');
                        const assetCategory = this.getAttribute('data-asset-category');
                        const department = this.getAttribute('data-department');
                        const currentStock = this.getAttribute('data-current-stock');
                        const status = this.getAttribute('data-status');
                        const entryDate = this.getAttribute('data-entry-date');

                        // 填充模态框内容
                        const assetDetails = document.getElementById('assetDetails');
                        assetDetails.innerHTML = "<tr><td>资产编号</td><td>" + assetId + "</td></tr>" +
                            "<tr><td>资产名称</td><td>" + assetName + "</td></tr>" +
                            "<tr><td>资产分类</td><td>" + assetCategory + "</td></tr>" +
                            "<tr><td>所属部门</td><td>" + department + "</td></tr>" +
                            "<tr><td>状态</td><td><span class=\"badge bg-success\">" + status + "</span></td></tr>" +
                            "<tr><td>入库日期</td><td>" + entryDate + "</td></tr>"+
                            "<tr><td>描述</td><td>" + currentStock + "</td></tr>"
                    });
                });
                $("#page1").val(data.page.pageTotal)       // 总页数
                $("#page2").val(data.page.currentPage)   // 当前页数
                $("#page3").val(data.page.recordTotal)    // 共多少条
                $("#sum").append(data.page.pageTotal)
                $("#current").append(data.page.currentPage)
                $("#pagesize").append(data.page.recordTotal)
            }
        })
    })


    // 点击首页按钮的 ajax 请求
    $("#index").click(function (){
        // 在这里编写点击事件的处理代码
        var type = $("#type").val()
        var dept = $("#dept").val()
        var state = $("#state").val()
        var zc_name_input = $("#zc_name_input").val()
        $("#neirong").empty();
        $.ajax({
            url:"/getlist",
            data:{
                pagesize:1,
                type:type,
                dept:dept,
                state:state,
                name:zc_name_input
            },
            dataType:"json",
            success:function (data){
                for (let i = 0; i <data.list.length ; i++) {
                    $("#neirong").append(
                        "<tr>" +
                        "<td>"+data.list[i].id+"</td>" +
                        "<td>"+data.list[i].name+"</td>" +
                        "<td>"+data.list[i].type.name+"</td>" +
                        "<td>"+data.list[i].dept.name+"</td>" +
                        "<td>"+data.list[i].storage_location+"</td>" +
                        "<td>"+data.list[i].original_value+"</td>" +
                        "<td>"+data.list[i].state.name+"</td>" +
                        "<td>"+data.list[i].acquisition_date+"</td>" +
                        "<td>"+data.list[i].supplier+"</td>" +
                        "<td>"+data.list[i].term_of_service+"</td>" +
                        "<td class='btn btn-sm btn-outline-primary'  data-bs-toggle='modal'  data-bs-target='#viewModal' data-asset-id="+data.list[i].id+" data-asset-name="+data.list[i].name+"  data-asset-category="+data.list[i].type.name+"   data-department="+data.list[i].dept.name+"   data-current-stock="+data.list[i].description+"   data-status="+data.list[i].state.name+"  data-entry-date="+data.list[i].acquisition_date+"><button style='border: none; background: none; outline: none; padding: 0;'>查看</button></td>" +
                        "</tr>"
                    )
                }
                // 获取所有“查看”按钮
                const viewButtons = document.querySelectorAll('.btn-outline-primary[data-bs-toggle="modal"]');

                viewButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 获取数据属性
                        const assetId = this.getAttribute('data-asset-id');
                        const assetName = this.getAttribute('data-asset-name');
                        const assetCategory = this.getAttribute('data-asset-category');
                        const department = this.getAttribute('data-department');
                        const currentStock = this.getAttribute('data-current-stock');
                        const status = this.getAttribute('data-status');
                        const entryDate = this.getAttribute('data-entry-date');

                        // 填充模态框内容
                        const assetDetails = document.getElementById('assetDetails');
                        assetDetails.innerHTML = "<tr><td>资产编号</td><td>" + assetId + "</td></tr>" +
                            "<tr><td>资产名称</td><td>" + assetName + "</td></tr>" +
                            "<tr><td>资产分类</td><td>" + assetCategory + "</td></tr>" +
                            "<tr><td>所属部门</td><td>" + department + "</td></tr>" +
                            "<tr><td>状态</td><td><span class=\"badge bg-success\">" + status + "</span></td></tr>" +
                            "<tr><td>入库日期</td><td>" + entryDate + "</td></tr>"+
                            "<tr><td>描述</td><td>" + currentStock + "</td></tr>"
                    });
                });
                $("#page1").text("");
                $("#page2").text("");
                $("#page3").text("");
                $("#sum").text("");
                $("#current").text("");
                $("#pagesize").text("");

                $("#page1").val(data.page.pageTotal)       // 总页数
                $("#page2").val(data.page.currentPage)   // 当前页数
                $("#page3").val(data.page.recordTotal)    // 共多少条
                $("#sum").append(data.page.pageTotal)
                $("#current").append(data.page.currentPage)
                $("#pagesize").append(data.page.recordTotal)

            }
        })
    })

    // 点击尾页按钮的 ajax 请求
    $("#Last_page").click(function (){
        $("#neirong").empty();
        // 在这里编写点击事件的处理代码
        var type = $("#type").val()
        var dept = $("#dept").val()
        var state = $("#state").val()
        var zc_name_input = $("#zc_name_input").val()
        $.ajax({
            url:"/getlist",
            data:{
                pagesize:$("#page1").val(),
                type:type,
                dept:dept,
                state:state,
                name:zc_name_input
            },
            dataType:"json",
            success:function (data){
                for (let i = 0; i <data.list.length ; i++) {
                    $("#neirong").append(
                        "<tr>" +
                        "<td>"+data.list[i].id+"</td>" +
                        "<td>"+data.list[i].name+"</td>" +
                        "<td>"+data.list[i].type.name+"</td>" +
                        "<td>"+data.list[i].dept.name+"</td>" +
                        "<td>"+data.list[i].storage_location+"</td>" +
                        "<td>"+data.list[i].original_value+"</td>" +
                        "<td>"+data.list[i].state.name+"</td>" +
                        "<td>"+data.list[i].acquisition_date+"</td>" +
                        "<td>"+data.list[i].supplier+"</td>" +
                        "<td>"+data.list[i].term_of_service+"</td>" +
                        "<td class='btn btn-sm btn-outline-primary'  data-bs-toggle='modal'  data-bs-target='#viewModal' data-asset-id="+data.list[i].id+" data-asset-name="+data.list[i].name+"  data-asset-category="+data.list[i].type.name+"   data-department="+data.list[i].dept.name+"   data-current-stock="+data.list[i].description+"   data-status="+data.list[i].state.name+"  data-entry-date="+data.list[i].acquisition_date+"><button style='border: none; background: none; outline: none; padding: 0;'>查看</button></td>" +
                        "</tr>"
                    )
                }
                // 获取所有“查看”按钮
                const viewButtons = document.querySelectorAll('.btn-outline-primary[data-bs-toggle="modal"]');

                viewButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 获取数据属性
                        const assetId = this.getAttribute('data-asset-id');
                        const assetName = this.getAttribute('data-asset-name');
                        const assetCategory = this.getAttribute('data-asset-category');
                        const department = this.getAttribute('data-department');
                        const currentStock = this.getAttribute('data-current-stock');
                        const status = this.getAttribute('data-status');
                        const entryDate = this.getAttribute('data-entry-date');

                        // 填充模态框内容
                        const assetDetails = document.getElementById('assetDetails');
                        assetDetails.innerHTML = "<tr><td>资产编号</td><td>" + assetId + "</td></tr>" +
                            "<tr><td>资产名称</td><td>" + assetName + "</td></tr>" +
                            "<tr><td>资产分类</td><td>" + assetCategory + "</td></tr>" +
                            "<tr><td>所属部门</td><td>" + department + "</td></tr>" +
                            "<tr><td>状态</td><td><span class=\"badge bg-success\">" + status + "</span></td></tr>" +
                            "<tr><td>入库日期</td><td>" + entryDate + "</td></tr>"+
                            "<tr><td>描述</td><td>" + currentStock + "</td></tr>"
                    });
                });
                $("#page1").text("");
                $("#page2").text("");
                $("#page3").text("");
                $("#sum").text("");
                $("#current").text("");
                $("#pagesize").text("");

                $("#page1").val(data.page.pageTotal)       // 总页数
                $("#page2").val(data.page.currentPage)   // 当前页数
                $("#page3").val(data.page.recordTotal)    // 共多少条
                $("#sum").append(data.page.pageTotal)
                $("#current").append(data.page.currentPage)
                $("#pagesize").append(data.page.recordTotal)
            }
        })
    })

  // 点击上一页的 ajax 请求
    $("#s").click(function (){
        console.log($("#page2").val())
        if(!($("#page2").val()== 1)){
            // 在这里编写点击事件的处理代码
            var type = $("#type").val()
            var dept = $("#dept").val()
            var state = $("#state").val()
            var zc_name_input = $("#zc_name_input").val()
            $("#neirong").empty();
            $.ajax({
                url:"/getlist",
                data:{
                    pagesize: $("#page2").val() -1,
                    type:type,
                    dept:dept,
                    state:state,
                    name:zc_name_input
                },
                dataType:"json",
                success:function (data){
                    for (let i = 0; i <data.list.length ; i++) {
                        $("#neirong").append(
                            "<tr>" +
                            "<td>"+data.list[i].id+"</td>" +
                            "<td>"+data.list[i].name+"</td>" +
                            "<td>"+data.list[i].type.name+"</td>" +
                            "<td>"+data.list[i].dept.name+"</td>" +
                            "<td>"+data.list[i].storage_location+"</td>" +
                            "<td>"+data.list[i].original_value+"</td>" +
                            "<td>"+data.list[i].state.name+"</td>" +
                            "<td>"+data.list[i].acquisition_date+"</td>" +
                            "<td>"+data.list[i].supplier+"</td>" +
                            "<td>"+data.list[i].term_of_service+"</td>" +
                            "<td class='btn btn-sm btn-outline-primary'  data-bs-toggle='modal'  data-bs-target='#viewModal' data-asset-id="+data.list[i].id+" data-asset-name="+data.list[i].name+"  data-asset-category="+data.list[i].type.name+"   data-department="+data.list[i].dept.name+"   data-current-stock="+data.list[i].description+"   data-status="+data.list[i].state.name+"  data-entry-date="+data.list[i].acquisition_date+"><button style='border: none; background: none; outline: none; padding: 0;'>查看</button></td>" +
                            "</tr>"
                        )
                    }
                    // 获取所有“查看”按钮
                    const viewButtons = document.querySelectorAll('.btn-outline-primary[data-bs-toggle="modal"]');

                    viewButtons.forEach(button => {
                        button.addEventListener('click', function() {
                            // 获取数据属性
                            const assetId = this.getAttribute('data-asset-id');
                            const assetName = this.getAttribute('data-asset-name');
                            const assetCategory = this.getAttribute('data-asset-category');
                            const department = this.getAttribute('data-department');
                            const currentStock = this.getAttribute('data-current-stock');
                            const status = this.getAttribute('data-status');
                            const entryDate = this.getAttribute('data-entry-date');

                            // 填充模态框内容
                            const assetDetails = document.getElementById('assetDetails');
                            assetDetails.innerHTML = "<tr><td>资产编号</td><td>" + assetId + "</td></tr>" +
                                "<tr><td>资产名称</td><td>" + assetName + "</td></tr>" +
                                "<tr><td>资产分类</td><td>" + assetCategory + "</td></tr>" +
                                "<tr><td>所属部门</td><td>" + department + "</td></tr>" +
                                "<tr><td>状态</td><td><span class=\"badge bg-success\">" + status + "</span></td></tr>" +
                                "<tr><td>入库日期</td><td>" + entryDate + "</td></tr>"+
                                "<tr><td>描述</td><td>" + currentStock + "</td></tr>"
                        });
                    });
                    $("#page1").text("");
                    $("#page2").text("");
                    $("#page3").text("");
                    $("#sum").text("");
                    $("#current").text("");
                    $("#pagesize").text("");

                    $("#page1").val(data.page.pageTotal)       // 总页数
                    $("#page2").val(data.page.currentPage)   // 当前页数
                    $("#page3").val(data.page.recordTotal)    // 共多少条
                    $("#sum").append(data.page.pageTotal)
                    $("#current").append(data.page.currentPage)
                    $("#pagesize").append(data.page.recordTotal)
                }
            })
        }else{
            alert("已经是第一页了")
        }

    })

    // 点击下一页的 ajax 请求
    $("#x").click(function (){
        console.log($("#page2").val())

        if(!($("#page2").val()== $("#page1").val())){
            // 在这里编写点击事件的处理代码
            var type = $("#type").val()
            var dept = $("#dept").val()
            var state = $("#state").val()
            var zc_name_input = $("#zc_name_input").val()
            $("#neirong").empty();
            $.ajax({
                url:"/getlist",
                data:{
                    pagesize: parseInt($("#page2").val())+1,
                    type:type,
                    dept:dept,
                    state:state,
                    name:zc_name_input
                },
                dataType:"json",
                success:function (data){
                    for (let i = 0; i <data.list.length ; i++) {
                        $("#neirong").append(
                            "<tr>" +
                            "<td>"+data.list[i].id+"</td>" +
                            "<td>"+data.list[i].name+"</td>" +
                            "<td>"+data.list[i].type.name+"</td>" +
                            "<td>"+data.list[i].dept.name+"</td>" +
                            "<td>"+data.list[i].storage_location+"</td>" +
                            "<td>"+data.list[i].original_value+"</td>" +
                            "<td>"+data.list[i].state.name+"</td>" +
                            "<td>"+data.list[i].acquisition_date+"</td>" +
                            "<td>"+data.list[i].supplier+"</td>" +
                            "<td>"+data.list[i].term_of_service+"</td>" +
                            "<td class='btn btn-sm btn-outline-primary look'  data-bs-toggle='modal'  data-bs-target='#viewModal' data-asset-id="+data.list[i].id+" data-asset-name="+data.list[i].name+"  data-asset-category="+data.list[i].type.name+"   data-department="+data.list[i].dept.name+"   data-current-stock="+data.list[i].description+"   data-status="+data.list[i].state.name+"  data-entry-date="+data.list[i].acquisition_date+"><button style='border: none; background: none; outline: none; padding: 0;'>查看</button></td>" +
                            "</tr>"
                        )
                    }
                    // 获取所有“查看”按钮
                    const viewButtons = document.querySelectorAll('.btn-outline-primary[data-bs-toggle="modal"]');

                    viewButtons.forEach(button => {
                        button.addEventListener('click', function() {
                            // 获取数据属性
                            const assetId = this.getAttribute('data-asset-id');
                            const assetName = this.getAttribute('data-asset-name');
                            const assetCategory = this.getAttribute('data-asset-category');
                            const department = this.getAttribute('data-department');
                            const currentStock = this.getAttribute('data-current-stock');
                            const status = this.getAttribute('data-status');
                            const entryDate = this.getAttribute('data-entry-date');

                            // 填充模态框内容
                            const assetDetails = document.getElementById('assetDetails');
                            assetDetails.innerHTML = "<tr><td>资产编号</td><td>" + assetId + "</td></tr>" +
                                "<tr><td>资产名称</td><td>" + assetName + "</td></tr>" +
                                "<tr><td>资产分类</td><td>" + assetCategory + "</td></tr>" +
                                "<tr><td>所属部门</td><td>" + department + "</td></tr>" +
                                "<tr><td>状态</td><td><span class=\"badge bg-success\">" + status + "</span></td></tr>" +
                                "<tr><td>入库日期</td><td>" + entryDate + "</td></tr>"+
                                "<tr><td>描述</td><td>" + currentStock + "</td></tr>"
                        });
                    });
                    $("#page1").text("");
                    $("#page2").text("");
                    $("#page3").text("");
                    $("#sum").text("");
                    $("#current").text("");
                    $("#pagesize").text("");

                    $("#page1").val(data.page.pageTotal)       // 总页数
                    $("#page2").val(data.page.currentPage)   // 当前页数
                    $("#page3").val(data.page.recordTotal)    // 共多少条
                    $("#sum").append(data.page.pageTotal)
                    $("#current").append(data.page.currentPage)
                    $("#pagesize").append(data.page.recordTotal)
                }
            })
        }else{
            alert("已经是最后一页了")
        }

    })

    //  点击查询触发的 ajax 请求
    $("#query").click(function (){
        // 在这里编写点击事件的处理代码
        var type = $("#type").val()
        var dept = $("#dept").val()
        var state = $("#state").val()
        var zc_name_input = $("#zc_name_input").val()
        $("#neirong").empty();
        $.ajax({
            url:"/getlist",
            method:"get",
            data:{
                type:type,
                dept:dept,
                state:state,
                name:zc_name_input
            },
            success:function (data){
                console.log(data)
                for (let i = 0; i <data.list.length ; i++) {
                    $("#neirong").append(
                        "<tr>" +
                        "<td>"+data.list[i].id+"</td>" +
                        "<td>"+data.list[i].name+"</td>" +
                        "<td>"+data.list[i].type.name+"</td>" +
                        "<td>"+data.list[i].dept.name+"</td>" +
                        "<td>"+data.list[i].storage_location+"</td>" +
                        "<td>"+data.list[i].original_value+"</td>" +
                        "<td>"+data.list[i].state.name+"</td>" +
                        "<td>"+data.list[i].acquisition_date+"</td>" +
                        "<td>"+data.list[i].supplier+"</td>" +
                        "<td>"+data.list[i].term_of_service+"</td>" +
                        "<td class='btn btn-sm btn-outline-primary look' data-bs-toggle='modal' data-bs-target='#viewModal' data-asset-id="+data.list[i].id+" data-asset-name="+data.list[i].name+" data-asset-category="+data.list[i].type.name+" data-department="+data.list[i].dept.name+" data-current-stock="+data.list[i].description+" data-status="+data.list[i].state.name+" data-entry-date="+data.list[i].acquisition_date+"><button style='border: none; background: none; outline: none; padding: 0;'>查看</button></td>" +
                        "</tr>"
                    )
                }
                // 获取所有“查看”按钮
                const viewButtons = document.querySelectorAll('.btn-outline-primary[data-bs-toggle="modal"]');

                viewButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 获取数据属性
                        const assetId = this.getAttribute('data-asset-id');
                        const assetName = this.getAttribute('data-asset-name');
                        const assetCategory = this.getAttribute('data-asset-category');
                        const department = this.getAttribute('data-department');
                        const currentStock = this.getAttribute('data-current-stock');
                        const status = this.getAttribute('data-status');
                        const entryDate = this.getAttribute('data-entry-date');

                        // 填充模态框内容
                        const assetDetails = document.getElementById('assetDetails');
                        assetDetails.innerHTML = "<tr><td>资产编号</td><td>" + assetId + "</td></tr>" +
                            "<tr><td>资产名称</td><td>" + assetName + "</td></tr>" +
                            "<tr><td>资产分类</td><td>" + assetCategory + "</td></tr>" +
                            "<tr><td>所属部门</td><td>" + department + "</td></tr>" +
                            "<tr><td>状态</td><td><span class=\"badge bg-success\">" + status + "</span></td></tr>" +
                            "<tr><td>入库日期</td><td>" + entryDate + "</td></tr>"+
                            "<tr><td>描述</td><td>" + currentStock + "</td></tr>"
                    });
                });
                $("#page1").text("");
                $("#page2").text("");
                $("#page3").text("");
                $("#sum").text("");
                $("#current").text("");
                $("#pagesize").text("");

                $("#page1").val(data.page.pageTotal)       // 总页数
                $("#page2").val(data.page.currentPage)   // 当前页数
                $("#page3").val(data.page.recordTotal)    // 共多少条
                $("#sum").append(data.page.pageTotal)
                $("#current").append(data.page.currentPage)
                $("#pagesize").append(data.page.recordTotal)
            }
        })
    });


</script>

</body>
</html>